<template>
  <section class="todoapp">
    <TodoHeader
      @add="addFn"
    ></TodoHeader>
    <TodoMain
      :list = "list"
      :type = 'type'
      @del = 'delFn'
      @change = 'changeFn'
      @edit = 'editFn'
      @checkAll = 'checkAllFn'
    ></TodoMain>
    <TodoFooter
      :list = "list"
      :type = 'type'
      @clear = 'clearFn'
      @filter = 'filterFn'
    ></TodoFooter>
  </section>
</template>

<script>
import TodoHeader from './components/TodoHeader'
import TodoMain from './components/TodoMain'
import TodoFooter from './components/TodoFooter'
export default {
  components: {
    TodoHeader,
    TodoMain,
    TodoFooter,
  },
  data() {
    return {
      list: [
        { id: 1, name: '吃饭', isDone: true },
        { id: 2, name: '睡觉', isDone: false },
        { id: 3, name: '打豆豆', isDone: true },
      ],
      type: 'all',
    }
  },
  methods: {
    delFn(id) {
      this.list = this.list.filter(item => item.id !== id)
    },
    changeFn(id) {
      // 找到当前id的对象，把checked取反
      const obj = this.list.find(item => item.id === id)
      obj.isDone = !obj.isDone
    },
    addFn(name) {
      // 给数组添加数据
      this.list.unshift({
        id: Date.now(),
        name,
        isDone: false
      })
    },
    editFn(id, name) {
      this.list.find(item => item.id === id).name = name
    },
    // 根据选中状态，清空所有完成的
    clearFn() {
      this.list = this.list.filter(item => !item.isDone)
    },
    // 接受底部传过来的type
    filterFn(type) {
      this.type = type
    },
    checkAllFn(value) {
      this.list.forEach(item => item.isDone = value)
    }
  },
}
</script>

<style>

</style>